<template>
	<view class="content ss-m-20 bg_white ss-r-16">
		<view class="top ss-flex ss-row-between ss-col-center bg_green">
			<view class="coupon color_3d ">
				<view class="title">犇犇直播</view>
				<view class="live">
					<image src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/default/202407261358303289.png" mode="aspectFit" class="img"></image>
					<view class="label">宠爱医院绝育·直播间送豪礼啦</view>
				</view>
			</view>
			<view class="more">
				<view class="more_text">更多</view>
				<uni-icons type="right" size="16" class="icon" color="#868686"></uni-icons>
			</view>
		</view>
		<view class="bottom-view ss-flex-row ss-row-left ss-col-center">
			<image src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/default/20240726/5f83658a19e70029884b521fd0a60550.png" mode="aspectFit" class="avatar"></image>
			<view class="goods ss-flex-col ss-row-between ss-row-left">
				<view class="item ss-flex-row ss-row-left ss-m-t-10">
					<image src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/default/20240726/9186ad183dfbf1e69100656eacfcb425.png" mode="aspectFit" class="goods-img"></image>
					<view class="goods-title ss-m-l-10 ">
						<view class="title">尤尼菲抑菌止痒</view>
						<view class="hot color-red ss-m-t-10">火爆热销</view>
						<view class="ss-flex-row ss-row-left ss-col-center ss-m-t-10">
							<view class="amount  color-red"><text class="money">¥</text>52</view>
							<view class="dis ss-p-10 ss-r-10 color-red ss-m-l-10">7折</view>
							<view class="price ss-m-l-10">￥420</view>
						</view>
					</view>
				</view>
				<view class="item ss-flex-row ss-row-left  ss-m-b-10">
					<image src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/default/20240726/9186ad183dfbf1e69100656eacfcb425.png" mode="aspectFit" class="goods-img"></image>
					<view class="goods-title ss-m-l-10 ">
						<view class="title">尤尼菲抑菌止痒</view>
						<view class="hot color-red ss-m-t-10">火爆热销</view>
						<view class="ss-flex-row ss-row-left ss-col-center ss-m-t-10">
							<view class="amount  color-red"><text class="money">¥</text>52</view>
							<view class="dis ss-p-10 ss-r-10 color-red ss-m-l-10">7折</view>
							<view class="price ss-m-l-10">￥420</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="blank"></view>
	</view>
</template>

<script setup>
	//直播组件
	import {
			reactive,			
			ref
		} from 'vue';
	import sheep from '@/sheep';
</script>

<style lang="scss" scoped>

.content{
	width:calc(100vw - 40rpx);
	box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
	font-family: PingFang SC;
	.top{
		height:70rpx;
		width:calc(100vw - 40rpx);
		
		.coupon{
			display: flex;
			justify-content: center;
			align-items: center;
			.title{
				font-size: 28rpx;
				line-height: 42rpx;
				text-align: center;
				letter-spacing: -0.6rpx;
				color: #3D3D3D;
				margin-left: 20rpx;
			}
			.live{
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left:20rpx;
				margin-top: 5rpx;
				background: #ffffff;
				border-radius: 0 10rpx 10rpx 0;
				.img{
					height:40rpx;
					width:40rpx;
				}
				.label{
					font-size: 20rpx;
					line-height: 20rpx;
					letter-spacing: 1rpx;
					color: #FF6F04;
					padding-left: 10rpx;
					padding-right: 10rpx;
				}
			}
		}
		.more{
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			font-weight: normal;
			line-height: 30rpx;
			text-align: center;
			letter-spacing: -0.6rpx;
			color: #868686;
		}
	}
	.bottom-view{
		.avatar{
			height:260rpx;
			width:200rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
			margin-top:20rpx;
		}
		.goods{
			width:calc(100% - 300rpx);
			.item{
				.goods-img{
					width:120rpx;
					height:120rpx;
				}
				.goods-title{
					.title{
						font-size: 24rpx;
						font-weight: 600;
						
						letter-spacing:1px;
						color: #222222;
					}
					.hot{
						font-size: 20rpx;
						text-align: left;
						letter-spacing: 1px;
					}
					.amount{
						font-size: 30rpx;
						letter-spacing: -0.6rpx;
						.money{
							font-size: 20rpx;
						}
					}
					
					.dis{
						border: 1px solid #F84F18;
						font-size: 20rpx;
						letter-spacing: 1px;
					}
					.price{
						font-size: 20rpx;
						letter-spacing: 1rpx;
						text-decoration: line-through;
						color: #999999;
					}
				}
			}
		}
	}
}

.color-red{
	color: #F84F18;
}
.blank{
	height:20rpx;
	width:100%;
}

.bg_green {
  background-image: url('https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/default/20240726/42fb6a0890d2e6d37dda94152a3d93a3.png');
  background-size: cover;
  background-origin: content-box;
  height: 70rpx; 
  width:calc(100vw - 50rpx);;
}

.height-30{
	height:30rpx;
}


</style>
